<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../css/index_css.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*第一行css设置*/
        .header {
            position: relative;
            width: 100%;
            height: 150px;
            background-color: #1C1C1C;
        }

        .logo {
            float: left;
            position: absolute;
            margin-top: 35px;
            margin-left: 40px;
        }

        .logo img {
            height: 80px;
        }

        .logo-text {
            float: left;
            height: 150px;
            line-height: 150px;
            font-size: 17px;
            font-weight: 900;
            color: white;
            font-family: '黑体';
            margin-left: 130px;
        }

        li {
            list-style: none;
        }

        .nav {
            float: right;
            height: 150px;
            line-height: 150px;
            color: white;
            font-size: 20px;
        }

        .nav li {
            float: right;
            margin-left: 25px;
            font-weight: 900;
        }

        .nav .nav-right {
            margin-right: 60px;
        }

        /*第二行css设置*/
        .back-img {
            background: url(../images/R-C.png) no-repeat;
            background-position: center center;
            /*背景图片位置 */
            background-size: cover;
            /*设置图片呢大小，其中cover是不管图片大小，直接让其撑开占满整个屏幕*/
            /* background-attachment: scroll; */
        }

        .content01 {
            width: 100%;
            height: 350px;
            background: #CE6810;
        }

        .content01 .bigtext {
            margin-left: 200px;
            font-size: 70px;
            color: white;
            font-weight: 1000;
            padding-top: 90px;
        }

        .content01 .smalltext {
            margin-left: 200px;
            margin-top: 30px;
            color: white;
            font-size: 25px;
        }

        /*第三行*/
        .content02 {

            width: 100%;
            height: 500px;
            background-color: rgba(0, 0, 0, .6);
        }

        .content02 .bigtext {
            padding-top: 200px;
            margin-left: 200px;
            font-size: 60px;
            color: white;
        }

        .content02 .smalltext {
            font-size: 22px;
            margin-left: 200px;
            color: white;
            margin-top: 35px;
        }

        /* 第四行 */
        .back-img02 {
            background: url(../images/R-C20210720.1.jfif) no-repeat;
            background-size: cover;
            background-position: center center;
        }

        .content03 {
            width: 100%;
            height: 620px;
            background-color: rgba(75, 126, 141, .6);
        }

        .content03 .box {
            position: relative;
            float: right;
            width: 100%;
            height: 100%;

        }

        .content03 .bigtext {
            float: right;
            padding-top: 290px;
            color: white;
            font-size: 70px;
            padding-right: 220px;
        }

        .content03 .smalltext {
            position: absolute;
            bottom: 190px;
            right: 0;
            color: white;
            font-size: 25px;
            padding-right: 230px;
        }

        /* 第五行 */
        .content04 {
            float: left;
            width: 100%;

            background-color: #1C1C1C;
        }

        .content04 .text {
            padding-top: 100px;
            padding-left: 210px;
            color: white;
            font-size: 70px;
            font-weight: 700;
        }

        .content04 .man01 {
            float: left;
            margin-top: 60px;
            margin-left: 210px;
            width: 460px;
            height: 700px;
            padding-bottom: 100px;
        }

        .content04 .man02 {
            /*修改margin-left*/
            float: left;
            margin-top: 60px;
            margin-left: 40px;
            width: 460px;
            height: 700px;
            padding-bottom: 100px;
        }

        .content04 .name {
            margin-top: 20px;
            font-size: 25px;
            color: white;
        }

        .content04 img {
            width: 100%;
        }

        .content04 .introduce {
            padding-top: 10px;
            font-size: 25px;
            color: white;
        }

        .content04 .content {
            padding-top: 40px;
            color: white;
            font-size: 20px;
            text-indent: 2em;
        }

        /* 第六行 */
        .content05 {
            width: 100%;
            clear: left;
            /*因为前面盒子加了浮动会影响后面盒子，所以后面盒子与浮动交界的盒子应该清楚浮动*/
            height: 450px;
            color: black;
            background-color: #FFFFFF;
        }

        .content05 .bigtext {
            padding-top: 110px;
            padding-left: 200px;
            font-size: 70px;
            font-weight: 900;
        }

        .content05 .smalltext {
            padding-left: 200px;
            font-size: 25px;
            padding-top: 65px;
        }

        /* 第七行 */
        .content06 {
            width: 100%;
            color: black;
            background-color: #E8EAEC;
        }

        .content06 .text {
            width: 100%;
            padding-top: 110px;
            padding-left: 220px;
            font-size: 73px;
            font-weight: 900;
        }

        .content06 .box {
            padding-bottom: 200px;
        }

        .content06 ul li {

            display: inline-block;
            width: 350px;
            height: 600px;
            margin-left: 35px;
            margin-top: 60px;
            background-color: blanchedalmond;
        }

        .content06 ul li .hezi {
            position: relative;
        }

        .content06 ul li img {
            display: block;
            width: 100%;
            height: 520px;
        }

        .content06 ul li .triangle {
            position: absolute;
            left: 20px;
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-top: 20px solid #E8EAEC;
        }

        .content06 ul li span {
            position: absolute;
            top: 20px;
            display: inline-block;

            font-size: 30px;
            font-weight: 900;
        }

        .content06 ul .one {
            float: left;
            margin-left: 210px;
            display: block;
        }

        /* 第八行 */
        .content07 {
            float: left;
            width: 100%;
            background-color: #FEC979;
        }

        .content07 .text {
            padding-top: 120px;
            padding-left: 215px;
            color: black;
            font-size: 45px;
        }

        .content07 .relate {
            float: left;
            padding-top: 60px;
            padding-left: 215px;
            color: black;
            padding-bottom: 100px;
        }

        .content07 .relate input {
            display: block;
            width: 730px;
            height: 60px;
            font-size: 22px;
            line-height: 60px;
            margin-top: 17px;
        }

        .content07 .relate .end {
            display: block;
            width: 730px;
            height: 200px;
            font-size: 22px;
            line-height: 60px;
            margin-top: 17px
        }

        .content07 .relate button {
            margin-top: 18px;
            width: 120px;
            height: 60px;
            background: #633FF7;
            border-radius: 10px;
            color: white;
            font-size: 28px;
            font-weight: 700;
        }

        .content07 .information {
            float: left;
            padding-top: 80px;
        }

        .content07 .information .box01 {
           display: block;
            font-size: 22px;
            color: #222222;
        }

        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?noyia6');
            src: url('fonts/icomoon.eot?noyia6#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?noyia6') format('truetype'),
                url('fonts/icomoon.woff?noyia6') format('woff'),
                url('fonts/icomoon.svg?noyia6#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .content07 .information span {
            padding-top: 30px;
            font-family: 'icomoon';
            margin-left: 30px;
            float: left;
        }
        .content07 .information .box01 div{
            padding-top: 30px;
            float: left;
            margin-left: 15px;
        }
    </style>
</head>

<body>
    <!-- 第一行 -->
    <div class="header">
        <div class="logo">
            <img src="../images/麦数图标.png" alt="图片加载失败">
        </div>
        <div class="logo-text">
            METRIC DATA
        </div>

        <div class="nav">
            <ul>
                <li class="nav-right">联系我们</li>
                <li>服务内容</li>
                <li>品牌故事</li>
                <li>设计团队</li>
            </ul>
        </div>
    </div>
    <div class="back-img">
        <!-- 设置第一二行背景图片，可以使得第二行可以设置背景颜色 -->
        <!-- 第二行 -->
        <div class="content01">
            <div class="bigtext">让年轻的你，更懂自己</div>
            <div class="smalltext">助年轻的你，精准求职。</div>
        </div>
        <!-- 第三行 -->
        <div class="content02">
            <div class="bigtext">麦趣测评</div>
            <div class="smalltext">一款游戏化的职业竞争力在线自我测评系统，服务于以大学生群体为主的青年求职者</div>
        </div>
    </div>
    <!-- 第四行 -->
    <div class="back-img02">
        <div class="content03">
            <div class="box">
                <div class="bigtext">校园猎头</div>
                <div class="smalltext">招聘行业SaaS一站式服务平台，服务于校园猎头，促进大学生就业</div>
            </div>
        </div>
    </div>
    <!-- 第五行 -->
    <div class="content04">
        <div class="text">设计团队</div>
        <div class="man01">
            <img src="../images/图层 1 拷贝.png" alt="图片加载失败">
            <p class="name">Laura Miller</p>
            <p class="introduce">资深设计师&创始人</p>
            <p class="content">追求时尚与潮流，非常注重居室的空间的布局与使用功能的结合，注重展现建筑结构的形式美，探究材料自身的质地和色彩搭配的效果。</p>
        </div>
        <div class="man02">
            <img src="../images/图层 1 拷贝.png" alt="图片加载失败">
            <p class="name">Laura Miller</p>
            <p class="introduce">资深设计师&创始人</p>
            <p class="content">追求时尚与潮流，非常注重居室的空间的布局与使用功能的结合，注重展现建筑结构的形式美，探究材料自身的质地和色彩搭配的效果。</p>
        </div>
        <div class="man02">
            <img src="../images/图层 1 拷贝.png" alt="图片加载失败">
            <p class="name">Laura Miller</p>
            <p class="introduce">资深设计师&创始人</p>
            <p class="content">追求时尚与潮流，非常注重居室的空间的布局与使用功能的结合，注重展现建筑结构的形式美，探究材料自身的质地和色彩搭配的效果。</p>
        </div>
    </div>
    <!-- 第六行 -->
    <div class="content05">
        <div class="bigtext">品牌故事</div>
        <div class="smalltext">始于2020年，专注于校园招聘领域，我们追求专业与趣味的结合，注重高校应届生的求职体验，个人与岗位的精准匹配，帮助青年求职者探究最深层次的自我和最适合你的未来</div>
    </div>
    <!-- 第七行 -->
    <div class="content06">
        <div class="text">服务内容</div>
        <div class="box">
            <ul>
                <li class="one">
                    <img src="../images/55421_497465.jpg" alt="图片加载失败">
                    <div class="hezi">
                        <div class="triangle"></div>
                        <span>宣讲Vlog</span>
                    </div>
                </li>
                <li>
                    <img src="../images/559923_485133.jpg" alt="图片加载失败">
                    <div class="hezi">
                        <div class="triangle"></div>
                        <span>游戏测评</span>
                    </div>
                </li>
                <li>
                    <img src="../images/Fig9uV9KkUb_B_69Rn3SbHkIQHPN.png" alt="图片加载失败">
                    <div class="hezi">
                        <div class="triangle"></div>
                        <span>简历生成</span>
                    </div>
                </li>
                <li>
                    <img src="../images/FqesjeL_-kzWTO4CsqozI_s3k6MB.png" alt="图片加载失败">
                    <div class="hezi">
                        <div class="triangle"></div>
                        <span>职位咨询</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 第八行 -->
    <div class="content07">
        <div class="text">联系我们</div>
        <div class="relate">
            <form action="">
                <input type="text" placeholder="姓名">
                <input type="text" placeholder="电子邮箱">
                <input type="text" placeholder="联系电话">
                <textarea placeholder="备注内容" class="end"></textarea>
                <button>提交</button>
            </form>
        </div>
        <div class="information">
            <div class="box01"> <span></span>
                <div>南京市江北新区盘城新街114号</div>
            </div>
            <div class="box01"> <span></span>
                <div>星期一至星期五10am-5pm</div>
            </div>
            <div class="box01"><span></span>
                <div>17312733105</div>
            </div>
            <div class="box01"><span></span>
                <div>zhangxinlei@metric.com</div>
            </div>

        </div>
    </div>
</body>

</html>